<template>
  <div class="special-view">
    <div v-show="showBanner" class="banner-contaner" :style="{padding:showStyle}">
      <div class="banner" :style="{backgroundSize:imgStyle,backgroundImage: `url(${imgUrl})`}" />
    </div>
    <div class="list">
      <div
        class="margin-lr-xs bg-white flex align-center justify-center flex-direction"
        style="width: 100px; height: 170px; padding: 2px; border: 4px"
      >
        <div style="width: 93px; height: 86px" />
        <div style="padding-top: 14px">
          <div
            class="text-2-cut"
            style="
            width: 91px;
            height: 34px;
            font-size: 12px;
            color: rgb(45, 68, 84);
          "
          >
            秋衣大号
          </div>
          <div
            class="flex align-center justify-between"
            style="padding-top: 3px; padding-bottom: 7px"
          >
            <div
              style="
              width: 57px;
              height: 21px;
              line-height: 21px;
              font-size: 12px;
              color: rgb(246, 41, 41);
            "
            >
              ￥1
            </div>
            <div class="round" style="width: 24px; height: 24px">
              <img
                src="../../../../../assets//images/cart.png"
                width="100%"
                height="100%"
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SpecialView',
  props: {
    options: {
      type: Object,
      default: null
    }
  },
  computed: {
    showBanner() {
      return this.options.banner.show
    },
    imgUrl() {
      const { imgUrl } = this.options.banner
      if (imgUrl) {
        return JSON.parse(imgUrl)[0].url
      } else {
        return require('../../../../../assets/images/bought.png')
      }
    },
    showStyle() {
      return this.options.banner.showStyle
    },
    imgStyle() {
      return this.options.banner.imgStyle
    },
    scroll() {
      return this.options.scroll
    }
  }
}
</script>
<style lang="scss" scoped>
.banner{
  height: 47px;
}
.list{
  padding: 10px;
}
</style>
